<template>
	<view>
		
		<view class="banner"><u-swiper height="100%" :list="bannerList" keyName="coverUrl" @click="clickSwiper"></u-swiper></view>
		
		<view class="search">
			<u-search 
			placeholder="请输入学习专栏名称搜索" 
			v-model="keyword" 
			bgColor="#fff"
			:clearabled="false" 
			:showAction="false"
			@change="search"
			></u-search>
		</view>
		
		<view class="tab">
			<u-sticky bgColor="#fff">
				<u-tabs 
				:list="subjectList" 
				lineColor="#12B9A3"
				keyName="subjectName"
				@click="clickTabs()"
				></u-tabs>
			</u-sticky>
		</view>

    
   <view class="list" v-if="courseList.length > 0">
    	 <view class="list_item" v-for="(item, index) in courseList" :key="item.id">
				 <view class="list_item_image"><image class="list_item_image" :src="imgUrl+item.coverUrl" mode="scaleToFill"></image></view>
				 <view class="list_item_courseInfo">
				 	 <text class="courseName">{{item.courseName}}</text>
					 <view class="courseDec">{{item.courseRemark}}</view>
					 <text class="study" @click="clickStudy(item)">开始学习</text>
				 </view>
    	 </view>
		 <u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
    </view>
	
	<u-empty v-if="courseList.length === 0" mode="list" marginTop="40upx"></u-empty>
	<tabbar :tab="0"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue';
import * as courseApi from '@/common/apis/course-api.js';
export default {
	components: {
		tabbar
	},
	data() {
		return {
			bannerList: [],
			subjectList: [],
			courseList: [],
			keyword: '',
			subjectId: '1',//科目id
			pageNum: 1,
			loadingStatus: '',
			imgUrl: this.examBaseImageUrl
		};
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.getCourseList();
	},
	
	onReachBottom() {
		this.getCourseList();
		this.loadingStatus = 'loading';
	},
	async onLoad() {
		await this.getBannerList();
		await this.getSubjectList();
	},
	methods: {
		async getBannerList() {
			courseApi.bannerList().then(res => {
				  var bannerList = res;
					for (var obj of bannerList) {
						obj.coverUrl = this.imgUrl+obj.coverUrl;
					}
					this.bannerList = bannerList;
				})
		},

		async getSubjectList() {
			courseApi.subjectList().then(res => {
				this.subjectList = res;
			  var obj = this.subjectList[0];
				this.subjectId = obj.id;
				setTimeout(() => {this.getCourseList()}, 2000)
			});
		},
		
		async getCourseList() {
			courseApi.courseList({
				subjectId : this.subjectId,
				courseName : this.keyword,
				pageNum: this.pageNum,
				pageSize : 10
			}).then(res => {
				if(this.pageNum == 1) {
					this.courseList = [];
					this.pageNum++;
					// this.loadingStatus = 'loadmore';
					this.loadingStatus = 'nomore';
				}else {
					if (!uni.$u.test.isEmpty(res)) {
						this.pageNum++;
						this.loadingStatus = 'loadmore';
					} else {
						this.loadingStatus = 'nomore';
					}
				}
				
				if (!uni.$u.test.isEmpty(res)) {
					this.courseList = res;
					//停用分页功能
					// this.courseList = this.courseList.concat(res);
				}
			})
		},
		
		clickloadmore() {
			this.getCourseList();
			this.loadingStatus = 'loading';
		},
		
		
	 	clickTabs(item) {
			this.subjectId = item.id;
			this.pageNum = 1;
		  this.getCourseList();
		},
		
		clickStudy(item) {
			getApp().globalData.courseInfo = item;
			uni.navigateTo({
				url: './chapter-list?courseId=' + item.id
			})
		},
		
		clickSwiper(index) {
			let item = this.bannerList[index];
			getApp().globalData.courseInfo = item;
			uni.navigateTo({
				url: './chapter-list?courseId=' + item.id
			})
		},
		
		//搜索
		search() {
			this.pageNum = 1;
			this.getCourseList();
		}
	}
};
</script>

<style lang="scss" scoped>
.banner {
	width: 100%;
	height: 240upx;
}
.search {
	position: absolute;
	top: 150upx;
	left: 50upx;
	right: 50upx;
	height: 72upx;
	background-color: #fff;
	border-radius: 8upx;
}
.tab {
	height: 100upx;
}

.list {

	padding: 10upx 35upx;
	&_item {
		padding: 10upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-bottom: 20upx;
		border-radius: 16upx;
		&_image {
			display: inline-block;
			width: 320upx;
			height: 180upx;
		}
		&_courseInfo {
			display: flex;
			flex-direction: column;
			margin-left: 26upx;
			// position: relative;
			width: 100%;
			.courseName {
				margin-top: 30upx;
				font-size: 30upx;
				font-family: Source Han Sans CN, Source Han Sans CN-Bold;
				font-weight: bold;
				text-align: left;
				color: #333333;
			}
			.courseDec {
				margin-top: 15upx;
				font-size: 20upx;
				font-family: Source Han Sans CN, Source Han Sans CN-Bold;
				font-weight: bold;
				text-align: left;
				color: #999999;
			}
			
			.study {
				display: inline-block;
				text-align: center;
				width: 130upx;
				align-self: flex-end;
				line-height: 54upx;
				font-size: 20upx;
				color: #fff;
				background-color: $green12;
				margin-top: 20upx;
				border-radius: 90upx;
			}
			
		}
	}
}
	


</style>
